.modal {
  width: 940px;
  height: 600px;
  background: linear-gradient(183deg, #e3e9fb -9.84%, #eef2ff 2.7%, #fff 16.48%);
  .header-title {
    margin: 32px 0 20px;
  }
  .cont {
    display: flex;
    height: 481px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--line-color-border-3, #dde2e9);
    .type {
      height: 480px;
      width: fit-content;
      overflow: auto;
      border-right: 1px solid var(--line-color-border-2, #eaedf1);
      flex-shrink: 0;
    }
    .list {
      height: 480px;
      width: fit-content;
      overflow-y: auto;
      border-right: 1px solid var(--line-color-border-2, #eaedf1);
      flex-shrink: 0;
    }
    .detail {
      height: 480px;
      width: fit-content;
      overflow: hidden;
      flex-shrink: 0;
    }
  }
  :global {
    .arco-modal-content {
      padding: 0 32px 20px;
    }
  }
}

.type-radio-list {
  box-sizing: border-box;
  display: flex;
  width: 211px;
  padding: 20px;
  flex-direction: column;

  .input {
  }
  .item {
    display: flex;
    padding: 10px 12px;
    gap: 10px;
    align-self: stretch;
    border-radius: 6px;
    background: #fff;
    color: #000;

    /* Body/body-3 medium */
    font-family: 'PingFang SC';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px; /* 157.143% */
    letter-spacing: 0.042px;

    transition: all 0.2s;

    &:hover {
      background: #f5f5ff;
      color: #5252ff;
    }
  }
  .item-active {
    background: #f5f5ff;
    color: #5252ff;
  }
}

.service-list {
  height: 100%;
  box-sizing: border-box;
  width: 305px;
  padding: 20px;
  .group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    margin-bottom: 24px;
    .group-name {
      color: var(--text-color-text-2, var(--text-color-text-2, #42464e));

      /* Body/body-3 regular */
      font-family: 'PingFang SC';
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px; /* 157.143% */
      letter-spacing: 0.042px;
    }
    .item-list {
      scroll-padding: 20px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      .item {
        cursor: pointer;
        display: flex;
        padding: 12px;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        border-radius: 6px;
        border: 1px solid var(--line-color-border-2, #eaedf1);
        background: #fff;

        transition: all 0.2s;

        &:hover {
          background: #f5f5ff;
        }

        .icon {
          width: 22px;
          height: 22px;
          flex-shrink: 0;
          border-radius: 4px;
        }
        .name {
          color: var(--text-color-text-1, var(--text-color-text-1, #0c0d0e));

          /* Body/body-3 medium */
          font-family: 'PingFang SC';
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: 22px; /* 157.143% */
          letter-spacing: 0.042px;
        }
      }

      .item-active {
        background: #f5f5ff;
      }
    }
  }
}

.service-detail {
  box-sizing: border-box;
  height: 100%;
  width: 342px;
  display: flex;
  padding: 0px 20px;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  flex: 1 0 0;
  align-self: stretch;

  .title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 16px 0px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-color-text-1, var(--text-color-text-1, #0c0d0e));

    /* Body/body-3 medium */
    font-family: 'PingFang SC';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px; /* 157.143% */
    letter-spacing: 0.042px;
    border-bottom: 1px solid #eaedf1;
  }
  .desc {
    margin-bottom: 20px;
    color: var(--text-color-text-3, var(--text-color-text-3, #737a87));

    /* Body/body-2 regular */
    font-family: 'PingFang SC';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 169.231% */
    letter-spacing: 0.039px;
  }
  .json {
    overflow: auto;
    flex: 1;
    border-radius: 4px;
    background: var(--background-color-bg-4, #f6f8fa);
    .top {
      flex: 1;
      display: flex;
      padding: 8px 16px;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;

      border-bottom: 1px solid var(--line-color-border-2, #eaedf1);

      color: var(--text-color-text-2, var(--text-color-text-2, #42464e));

      /* Body/body-1 medium */
      font-family: 'PingFang SC';
      font-size: 12px;
      font-style: normal;
      font-weight: 500;
      line-height: 20px; /* 166.667% */
      letter-spacing: 0.036px;
    }
  }
}
